{% extends 'layout/basic.html' %}

{% block title %}
短信验证码登录页面
{% endblock %}


{% block css %}
    <style>
        .account{
            border: 1px solid #e8e5e5;
            padding: 10px 20px;
            box-shadow: 5px 10px 20px rgba(0,0,0,0.5);
        }
        .error_msg{
            font-size: 12px;
            color:Red;
            position: absolute;
        }
        #login_sms{
            margin-top:20px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="account">
                    <h2 class="text-center">短信登录</h2>
                <form id="form_data">
                    {% csrf_token %}
                    {% for field in form %}
                        {% if field.label == '验证码' %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>


                            <div class="clearfix">
                                <div style="width:60%; float : left">
                                    {{ field }}
                                    <span class="error_msg"></span>
                                </div>
                                <div style="width:40%; float : right">
                                    <button id="get_code" type="button" class="btn btn-default">点击获取验证码</button>
                                </div>
                            </div>

                        {% else %}
                            <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            <span class="error_msg"></span>
                            </div>
                        {% endif %}


                    {% endfor %}


                    <div>
                        <button type="button" id="login_sms" class="btn btn-primary">登录</button>
                        <div class="pull-right" style="margin-top:20px">
                            <a href="{% url 'login' %}">用户登录>>></a>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script>
        $(function(){
            bindGetCodeEvent();
            sendLoginData();

        });

        // 绑定点击获取验证码的事件
        function bindGetCodeEvent(){

            $('#get_code').click(function (){
                var phoneEle = $('#id_phone');
                var phone_num = phoneEle.val().trim();
                var phone_reg =/^(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if (phone_num.trim() && phone_reg.test(phone_num)) {
                    phoneEle.next().text('');
                    $.ajax({
                        url:'{% url "sms_code" %}',
                        type:'get',
                        data:{phone:phone_num,tpl:"login"},
                        success:function (res){
                            //console.log('>>>>',res)
                            if (res.status){
                                SmsTimer();//开始倒计时效果

                            }
                            else {
                                //console.log(res);
                                phoneEle.next().text(res.error_msg.phone);

                            }


                        }
                    })
                }else {
                    phoneEle.next().text('前端说:手机号格式有误');
                    return false;
                }

            })
        }

        // 倒计时效果函数
        function SmsTimer(){
            // 前端的变量一般是驼峰体写法
            // jquery的变量一般是$开头
            // 1 将标签设置为不可点击的效果
            var $btnEle = $('#get_code');
            // selected\checked\disabled\enabled -- prop
            // 其他属性操作 -- attr
            $btnEle.prop('disabled', true);

            // 2 设置定时器读秒效果, 和标签文本内容的修改
            var timer = 60;
            var t = setInterval(
                function (){
                    $btnEle.text(`(${timer})秒后重新发送`);
                    timer--
                    if (timer <= 0 ){
                        clearInterval(t);
                        $btnEle.prop('disabled',false);
                        $btnEle.text(`点击发送验证码`);

                    }

                },
                1000
            )


        }

        // 点击登录发送ajax请求
        function sendLoginData() {
            // 1 绑定点击事件
            $('#login_sms').click(function() {
                // 2 获取用户输入的所有数据
                var data = $('#form_data').serialize();
                // console.log('>>>>',data)
                // 3 将数据发送到后端
                $.ajax({
                    url:'{% url "login_sms" %}',
                    type:'post',
                    data:data,
                    success:function (res) {
                        if (res.status){
                            location.href = res.path;
                        }else{
                            for (var key in res.error_msg){
                                //console.log(key);
                                $('#id_' + key).next().text(res.error_msg[key][0])
                            }

                            //console.log(res.error_msg)
                        }
                    }
                })
                // 4 根据响应结果,进行一些页面效果处理
            })

        }

    </script>



{% endblock %}